<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    custom-class="edit-dialog"
    @close="$emit('close')"
    width="600px"
  >
    <!-- tabs -->
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="first">
        <slot name="baseInfo" />
      </el-tab-pane>
      <el-tab-pane label="联系人" name="second">
        <template v-for="(item, index) in contactList">
          <el-divider :key="`divider${index}`">
            联系人{{ index + 1 }}
            <el-button
              type="warning"
              circle
              size="small"
              icon="el-icon-plus"
              @click="onAdd('contactList')"
            />
            <el-button
              type="danger"
              circle
              size="small"
              icon="el-icon-delete"
              @click="onDel('contactList', index)"
              v-if="contactList.length > 1"
            />
          </el-divider>
          <el-form inline label-width="100px" :key="`form${index}`">
            <el-form-item label="联系人名字">
              <el-input
                v-model="item.contactsName"
                placeholder="请输入联系人名字"
              />
            </el-form-item>
            <el-form-item label="联系人英文名">
              <el-input
                v-model="item.contactsEnglishName"
                placeholder="请输入联系人英文名"
              />
            </el-form-item>
            <el-form-item label="部门">
              <el-radio-group v-model="item.contactsDepartment">
                <el-radio label="1">业务部</el-radio>
                <el-radio label="2">报关部</el-radio>
                <el-radio label="3">财务部</el-radio>
                <el-radio label="4">物流部</el-radio>
                <el-radio label="5">其他</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="联系人备注">
              <el-input
                v-model="item.contactsRemarks"
                placeholder="请输入联系人备注"
              />
            </el-form-item>
            <el-form-item
              v-for="(items, indexs) in item.phones"
              :key="'phone' + indexs"
              :label="`联系电话${indexs + 1}`"
            >
              <el-input placeholder="联系电话" v-model="items.phone">
                <el-select v-model="items.phone" slot="prepend" placeholder="请选择">
                  <el-option label="餐厅名" value="1"></el-option>
                  <el-option label="订单号" value="2"></el-option>
                  <el-option label="用户电话" value="3"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
            <el-form-item
              v-for="(items, indexs) in item.emails"
              :key="'email' + indexs"
              :label="`电子邮箱${indexs + 1}`"
            >
              <el-input placeholder="电子邮箱" v-model="items.email" />
            </el-form-item>
          </el-form>
        </template>
      </el-tab-pane>
      <el-tab-pane label="文件管理" name="third" />
    </el-tabs>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="onConfirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'EditTab',
  data() {
    return {
      activeName: 'second',
      contactList: [
        {
          contactsName: '',
          contactsEnglishName: '',
          contactsDepartment: '',
          contactsRemarks: '',
          phones: [{ phone: '' }],
          emails: [{ email: '' }]
        }
      ]
    }
  },
  props: {
    visibleProp: Boolean,
    title: String
  },
  computed: {
    visible: {
      get() {
        return this.visibleProp
      },
      set() {}
    }
  },
  methods: {
    onAdd(item) {
      this[item].push({
        contactsName: '',
        contactsEnglishName: '',
        contactsDepartment: '',
        contactsRemarks: '',
        phones: [{ phone: '' }],
        emails: [{ email: '' }]
      })
    },
    onDel(item, idx) {
      this[item].splice(idx, 1)
    },
    onSuccess(res) {
      if (res.code === '000000') {
        this.$emit('success')
      }
    },
    onConfirm() {
      this.$refs.upload.submit()
    }
  }
}
</script>

<style lang="scss" scoped>
:deep .edit-dialog {
}
</style>
